<template>
    <div>
        <div class="tab">
            <ul>
                <router-link to="/home/personalized/persona" custom v-slot="{navigate,isActive}">
                <li @click="navigate"  class="one" :class="isActive?'flims':''">
                    <span >发现音乐</span>
                </li>
                </router-link>
                <li>博客</li>
                <li>视频</li>
                <li>朋友</li>
                <li>直播</li>
                <li>私人FM</li>
            </ul>
        </div>
        <div class="left">
            <router-view></router-view>
        </div>
    </div>
    
  
</template>
<script>
  export default {
    data() {
      return {
       
      }
    }
  };
</script>

<style lang="less" scoped>
.flims{
    background-color: #ccc;
    border-radius: 5px;
}
.tab{
    position: fixed;
    left: 0;
    top: 3.75rem;
    width: 12.5rem;
    height: 67.5rem;
    z-index: 998;
    // background-color: red;
    border-right:1px solid #ccc ;
    ul{
        height: 100%;
        width: 100%;
        padding: .625rem;
        li{
            margin: .625rem 0;
            width: 80%;
            height: 1.875rem;
            line-height: 1.875rem;
            user-select: none;
            padding: 0 0 0 5px;
        }
        li:hover{
            background-color: #ccc;
            border-radius: 5px;
        }
    }
}
.one{
    font-weight: bold;
    font-size: 1.25rem;
}
.left{
    margin-left: 12.5rem;
    margin-top: 3.75rem;
    
}
</style>